<template>
	<div class="default-main ba-table-box">
		<el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info"
			show-icon />

		<!-- 表格顶部菜单 -->
		<TableHeader :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
			:quick-search-placeholder="t('Quick search placeholder', { fields: 'ID' })" />

		<!-- 表格 -->
		<!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
		<Table />

		<!-- 表单 -->
		<PopupForm />
	</div>
</template>

<script setup lang="ts">
	import { provide } from 'vue'
	import baTableClass from '/@/utils/baTable'
	import PopupForm from './popupForm.vue'
	import Table from '/@/components/table/index.vue'
	import TableHeader from '/@/components/table/header/index.vue'
	import { defaultOptButtons } from '/@/components/table'
	import { baTableApi } from '/@/api/common'
	import { useI18n } from 'vue-i18n'

	defineOptions({
		name: 'routine/systemInfo',
	})

	const { t } = useI18n()
	const baTable = new baTableClass(
		new baTableApi('system/info/'),
		{
			column: [
				{ type: 'selection', align: 'center', operator: false },
				{ label: t('Id'), prop: 'id', align: 'center', operator: '=', operatorPlaceholder: t('Id'), width: 70 },
				{ 
					label: '类型', 
					prop: 'type', 
					align: 'center', 
					render: 'tag', 
					operator: 'IN', 
					width: '200',
					operatorPlaceholder: t('Fuzzy query'), 
					custom: { 1: 'primary', 2: 'success', 3: 'warning' }, 
					replaceValue: { 1: '热门活动', 2: '系统通知', 3: '商家公告' },
				},
				{ label: '标题', prop: 'title', align: 'center', operator: 'LIKE', operatorPlaceholder: t('Fuzzy query') },
				{ label: t('Create time'), prop: 'createtime', align: 'center', render: 'datetime', sortable: 'custom', operator: 'RANGE', width: 160 },
				{
					label: t('Operate'),
					align: 'center',
					width: '100',
					render: 'buttons',
					buttons: defaultOptButtons(['edit', 'delete']),
					operator: false,
				},
			],
			dblClickNotEditColumn: [undefined],
		},
		{
			defaultItems: {
				type: 2,
			},
		},
		{},
		{
			getEditData({ res }) {
			    if (res && res.data) {
			        baTable.form.items = res.data
			    }
			},
		}
	)
	// 重写auth方法，绕过权限控制，始终返回true
	baTable.auth = function () {
		return true
	}
	baTable.mount()
	baTable.getData()

	provide('baTable', baTable)
</script>

<style scoped lang="scss"></style>